<template>
  <div id="app">
    <a-button @click="showModal">打开高级查询</a-button>
    <AdvancedQueryModal
        :visible="isModalVisible"
        @ok="handleQuery"
        @cancel="handleCancelModal"
        @reset="handleResetQuery"
    />
    <div v-if="queryResult && Object.keys(queryResult).length > 0" class="result-container">
      <h3>查询结果参数</h3>
      <pre>{{ queryResult }}</pre>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import AdvancedQueryModal from '@/components/AdvancedQueryModal';

// 控制模态框显示状态
const isModalVisible = ref(false);
// 存储查询结果
const queryResult = ref({});

// 打开模态框
const showModal = () => {
  isModalVisible.value = true;
};

// 处理查询事件
const handleQuery = (params:any) => {
  console.log('查询参数:', params);
  queryResult.value = params;
  isModalVisible.value = false;
};

// 处理取消模态框事件
const handleCancelModal = () => {
  isModalVisible.value = false;
};

// 处理重置查询条件事件
const handleResetQuery = () => {
  console.log('查询条件已重置');
};
</script>

<style scoped lang="less">
.result-container {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  background-color: #fafafa;
}
</style>